<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a href="javascript:void(0)">
        {{ title }}
        <Icon :size="18" type="md-arrow-dropdown"/>
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
  export default {
    name: 'Language',
    props: {
      lang: String
    },
    data () {
      return {
        langList: {
          'zh-CN': '语言',
          'zh-TW': '語言',
          'en-US': 'Lang'
        },
        localList: {
          'zh-CN': '中文简体',
          'zh-TW': '中文繁体',
          'en-US': 'English'
        }
      }
    },
    watch: {
      lang (lang) {
        this.$i18n.locale = lang
      }
    },
    computed: {
      title () {
        return this.langList[this.lang]
      }
    },
    methods: {
      selectLang (name) {
        this.$emit('on-lang-change', name)
      }
    }
  }
</script>
